@import '../../style/color.sass'
@import '../../style/color_theme.sass'

body
    background: #fff !important
    background-image: none !important
    width: 100%
    height: 100%

.nav_container
    padding: 0 40px !important
    
.home_wrapper
    width: 100%
    height: 100%
    background: #fff
    position: relative
    

    .home_container
        background: #f1f2f6
        padding: 10px 40px
        width: 100%
        box-sizing: border-box
        min-height: 100%
    
    .home_content
        background: #fff

    .home_tabs
        width: 100% !important
    
    .ant-tabs-nav
        width: 100% !important
    
    .home_compare_btn
        width: 46px
        height: 46px
        color: $color_ffff
        border-radius: 100%
        background: $color_ff69
        text-align: center
        padding: 0 !important
        position: relative
        z-index: 999

        span
            display: block
        
        i
            font-size: 12px
            font-style:  normal
            margin-top: -3px

        &::after
            content: ' '
            position: absolute
            height: 56px
            width: 56px
            background: $color_ff69
            opacity: 0.6
            border-radius: 100%
            left: 50%
            transform: translate(-50%, -50%)
            top: 50%
            z-index: -1
            box-shadow: 0 0 8px $color_ff69
            

        &:hover
            background: $color_ff69
            color: $color_ffff
            
        &:focus
            background: $color_ff69
            color: $color_ffff 
    
    .compare_list_items
        width: 380px
        max-height: 380px
        overflow-y: scroll
        border-radius: 8px
        background: $color_ffff
        position: absolute
        right: 18px
        top: 26px
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3)
        padding-bottom: 12px
        z-index: 99
        dt
            text-align: center
            padding: 10px 0

            span
                display: inline-block
                position: relative

                &::after
                    position: absolute
                    width: 100%
                    height: 2px
                    background: $color_ff69
                    content: ''
                    bottom: -2px
                    left: 0

        dd
            padding: 10px 12px
            border-bottom: 1px solid #eee
            zoom: 0
            &::after
                content: ' '
                display: block
                width: 100%
                clear: both

            span
                float: left
                width: 18px
                height: 18px
                background: $color_ff69
                border-radius: 100%
                text-align: center
                color: $color_ffff
                line-height: 18px
                margin-right: 20px            
            a
                float: left
                font-weight: normal
                color: $color_3333
            
            i 
                float: right
                font-size: 16px
                color: #999
        
        .compare_btns_wrapper
            text-align: center
            padding-top: 10px
            
            .compare_clear_btn
                margin-right: 10px
                background: $color_d3d1
                border-radius: 18px
                padding: 0 20px
                height: 30px
                line-height: 27px
                color: $color_3333
                border: 0 none
                box-shadow: 0 0 6px rgba(0, 0, 0, 0.3)
            
            .compare_compare_btn
                margin-left: 10px
                padding: 0 20px
                border: 0 none
                background: $color_ff69
                color: $color_ffff
                border-radius: 18px
                box-shadow: 0 0 6px rgba(255, 105, 104, 1)


